<!DOCTYPE html>
<html>
<head>
  <title>字符信息</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/><meta name="color-scheme" content="light dark"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui">
  <style>
    .character-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      grid-gap: 10px; /* 减小字符之间的间距 */
      margin-top: 20px; /* 添加一个顶部边距 */
    }

    .character-info {
      border: 1px solid #ccc;
      padding: 10px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div>
    <h3>添加字符</h3>
    <div>
      <label for="character">字符:</label>
      <input type="text" id="character" required>
    </div>
    <div>
      <label for="category">类型:</label>
      <select id="category" required>
        <option value="通用">通用</option>
        <option value="基友">基友</option>
        <option value="情侣">情侣</option>
        <option value="闺蜜">闺蜜</option>
        <option value="死党">死党</option>
      </select>
    </div>
    <div>
      <label for="description">说明:</label>
      <textarea id="description" required></textarea>
    </div>
    <div>
      <label for="notes">备注:</label>
      <textarea id="notes"></textarea>
    </div>
    <div>
      <label for="screenshot">截图:</label>
      <input type="file" id="screenshot">
    </div>
    <button id="addCharacter">添加</button>
    <button id="export">导出</button>
  </div>

  <div class="character-grid" id="characterGrid"></div>

  <script>
    // 收集字符信息的数组
    var characterInfoList = [];

    // 添加字符按钮的点击事件处理程序
    document.getElementById('addCharacter').addEventListener('click', function () {
      // 获取输入字段的值
      var character = document.getElementById('character').value;
      var category = document.getElementById('category').value;
      var description = document.getElementById('description').value;
      var notes = document.getElementById('notes').value;
var file = document.getElementById('screenshot').files[0];  
        //判断类型是不是图片
try{
        if(!/image\/\w+/.test(file.type)){   
                alert("请确保文件为图像类型"); 
                return false; 
        } 
        var reader = new FileReader(); 
        reader.readAsDataURL(file); 
        reader.onload = function(e){ 
               screenshotData=this.result; //就是base64
 // 更新字符网格显示
      var characterGrid = document.getElementById('characterGrid');

        var characterInfoElement = document.createElement('div');
        characterInfoElement.classList.add('character-info');
        var screenshotElement = document.createElement('img');
        screenshotElement.src=screenshotData;
        screenshotElement.style="width:100%;height:100"
characterInfoElement.appendChild(screenshotElement);
        var characterElement = document.createElement('h4');
        characterElement.textContent = character;
        characterInfoElement.appendChild(characterElement);
        var categoryElement = document.createElement('p');
        categoryElement.textContent = '类型: ' + category;
        characterInfoElement.appendChild(categoryElement);

        var descriptionElement = document.createElement('p');
        descriptionElement.textContent = '说明: ' + description;
        characterInfoElement.appendChild(descriptionElement);

        var notesElement = document.createElement('p');
        notesElement.textContent = '备注: ' + notes;
        characterInfoElement.appendChild(notesElement);


        characterGrid.appendChild(characterInfoElement);
      // 创建字符信息对象
      var characterInfo = {
        category: category,
        description: description,
        notes: notes,
        screenshot: screenshotData
      };

      // 将字符信息添加到数组中
      eval("characterInfoList.push({"+character+":characterInfo});")

      // 清空输入字段的值
      document.getElementById('character').value = '';
      document.getElementById('category').value = '通用';
      document.getElementById('description').value = '';
      document.getElementById('notes').value = '';
      document.getElementById('screenshot').value = '';
      console.log(JSON.stringify(characterInfoList, null, 2));

        } 
}catch(e){}
    });
    document.getElementById('export').addEventListener('click', function () {
      var characterJSON = JSON.stringify(characterInfoList, null, 2);

      // 创建一个 <a> 元素，并为其添加一个下载链接
      var a = document.createElement('a');
      var file = new Blob([characterJSON], {type: 'application/json'});
      a.href = URL.createObjectURL(file);
      a.download = 'character_info.json';
      a.click();
      
      console.log('导出成功！');
    });
  </script>
</body>
</html>